<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Title -->
    <title>KELION</title>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="../css/tags.css">
</head>

<body>

<!-- Menu -->
<!-- Navigation -->
<nav class="navbar">
    <div class="container-fluid">
        <a class="home-link" href="../index.html">Home</a>

        <a class="archives-link" href="contact.html">Contact</a>
        <a class="archives-link" href="about.html">About</a>
        <a class="archives-link" href="tags.html">Tags</a>
        <div class=" toggle-hide mobile-inner-header-icon mobile-inner-header-icon-out">
            <span></span><span></span>
        </div>
    </div>
    <div class="mobile-inner-nav" role="navigation">
        <a href="tags.html" style="animation-delay: 0.1s;">Tags</a>
        <a href="about.html" style="animation-delay: 0.2s;">About</a>
        <a href="contact.html" style="animation-delay: 0.3s;">Contact</a>
    </div>
</nav>

<!-- Main Content -->
<!-- Page Header -->
<!-- Set your background image for this header in the theme's configuration: index_cover -->
<header class="intro-header">
    <div class="container">
        <div class="row">
            <div class="">
                <div class="site-heading">
                    <h1 class="user-name">Archives</h1>
                    <hr class="small">
                    <span class="subheading">说不出口的废猫</span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<div class="container">
    <div class="row">
        <div id="tag">
			<!-- 这里放标签 -->
        </div>
    </div>
</div>

<!-- jQuery -->
<script src="../js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        function toggleNavClass() {
            $(this).toggleClass("mobile-inner-header-icon-click mobile-inner-header-icon-out");
            $(".mobile-inner-nav").slideToggle(250);
        }
        var headerIcon = document.getElementsByClassName("mobile-inner-header-icon")[0];
        headerIcon.addEventListener("click", toggleNavClass, false);

        $(".mobile-inner-nav a").each(function (index) {
            $(this).css({'animation-delay': (index / 10) + 's'});
        });
    });
    
    $(document).ready(function(){
    	var list = "";
    	$.ajax({
			url : "../getCategory.do",
			type : "GET",
			dataType : "json",
			success : function(msg) {
				console.log(msg);
				var art = msg["articles"];
				var length = art.length;
				for (var i = 0; i < length; ++i) {
					var item = "<a class='button' href='category.html?category="+art[i].category+"'>"
					+art[i].category
					+"</a>";		
					list += item;
					console.log(list);
				}
				$("#tag").append(list);
			},
			error : function(er) {
				console.log(er);
			}
		});
    });
    
   
</script>

</body>

</html>